<template>
  <div style="text-align:center">
    <div>
      <van-nav-bar
        title="历史记录"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
      <div v-if="list.length">
        <van-card
          @click="$router.push(`/detail?id=${item.content.id}`)"
          v-for="item in list"
          :key="item.content.id"
          :price="item.content.price"
          :desc="item.create_time | date"
          :title="item.content.name"
          :thumb="item.content.images[0]"
        />
      </div>
      <div v-else>
        <van-empty
          description="无浏览记录"
          image="https://img2.baidu.com/it/u=3214428190,3968304704&fm=26&fmt=auto&gp=0.jpg"
        />
      </div>
    </div>
    <van-button v-if="list.length" @click="delHistory"  type="primary">删除所有记录</van-button>
    <goup/>
  </div>
</template>

<script>
import { getHistory, delHistory } from '@api/home'
import Goup from '@components/GoTop'
import { Dialog, Toast } from 'vant'
export default {
  data () {
    return {
      list: []
    }
  },
  created () {
    this.init()
  },
  filters: {
    date (val) {
      var d = new Date(val)
      var m = d.getMinutes()
      var s = d.getSeconds()
      m = checkTime(m)
      s = checkTime(s)

      function checkTime (i) {
        if (i < 10) {
          i = '0' + i
        }
        return i
      }
      return (
        d.getFullYear() +
        '年' +
        (d.getMonth() + 1) +
        '月' +
        d.getDate() +
        '日' +
        d.getHours() +
        '时' +
        m +
        '分' +
        s +
        '秒'
      )
    }
  },
  methods: {
    delHistory () {
      Dialog.confirm({
        title: '删除',
        message: '是否删除'
      })
        .then(() => {
          delHistory().then(res => {
            if (res.data.code === 200) {
              this.init()
            }
          })
        })
        .catch(() => {
          Toast('取消删除')
        })
    },
    onClickLeft () {
      this.$router.go(-1)
    },
    init () {
      getHistory().then((res) => {
        if (res.data.code === 200) {
          this.list = res.data.data
        }
      })
    }
  },
  components: { Goup }
}
</script>

<style lang="scss" scoped>
</style>
